1import { ImageResponse } from 'next/og';2import { getAssetBySlug } from '@/lib/queries/assets';3import { catName } from '@/lib/taxonomy';45export const runtime = 'nodejs';6export const alt = 'RareIndex asset card';7export const size = { width: 1200, height: 630 };8export const contentType = 'image/png';910function money(v: number | null): string {11 if (v === null) return 'Data unavailable';12 return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: v >= 1000 ? 0 : 2 }).format(v);13}1415export default async function Image({ params }: { params: Promise<{ slug: string }> }) {16 const { slug } = await params;17 const a = await getAssetBySlug(slug);18 const title = a?.title ?? 'RareIndex';19 const cat = a ? catName(a.categorySlug) : '';20 const riv = a ? money(a.rivUsd) : '';21 const chg = a?.change30d ?? null;22 return new ImageResponse(23 (24 <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 64, background: '#0b0c0e', color: '#f2f2f0', fontFamily: 'sans-serif' }}>25 <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 28 }}>26 <div style={{ width: 40, height: 40, background: '#f2f2f0', color: '#0b0c0e', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, borderRadius: 6 }}>R</div>27 <span style={{ fontWeight: 600 }}>RareIndex</span>28 <span style={{ color: '#8b8b93' }}>· {cat}</span>29 </div>30 <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>31 <div style={{ fontSize: 56, fontWeight: 600, lineHeight: 1.1, letterSpacing: -1 }}>{title.length > 80 ? `${title.slice(0, 79)}…` : title}</div>32 <div style={{ display: 'flex', alignItems: 'baseline', gap: 24 }}>33 <span style={{ fontSize: 24, color: '#8b8b93', textTransform: 'uppercase', letterSpacing: 2 }}>RareIndex Valuation</span>34 <span style={{ fontSize: 64, fontWeight: 700 }}>{riv}</span>35 {chg !== null ? <span style={{ fontSize: 32, color: chg >= 0 ? '#34c47c' : '#ef5a5f' }}>{`${chg >= 0 ? '+' : ''}${(chg * 100).toFixed(1)}% 30D`}</span> : null}36 </div>37 </div>38 <div style={{ fontSize: 22, color: '#6f6f76' }}>{a ? `${a.salesCount.toLocaleString('en-US')} verified sales · ${a.activeListings.toLocaleString('en-US')} active listings · www.rareindex.io` : 'www.rareindex.io'}</div>39 </div>40 ),41 { ...size },42 );43}44